<template>
    <div class="bottom_nav">
      <ul>
        <li>
          <router-link to="/main">
          <img v-if="!navflag1" src="http://ot9lfn4ld.bkt.clouddn.com/icon_-faxian-houye.png" >
          <img v-else src="../images/Icon_wpfaqidejindian_home.png" >
          <b :class="{active:navflag1}">首页</b>
          </router-link>

        </li>
        <li>
         <router-link to="/find">
         <img v-if="!navflag2" src="../images/Icon_wpfaqidejindian_eye2.png" >
         <img v-else src="http://ot9lfn4ld.bkt.clouddn.com/icon-faxian-eye.png" >
         <b :class="{active:navflag2}">发现</b>
         </router-link>
        </li>
        <li>
          <router-link to="/type">
          <img v-if="!navflag3" src="http://ot9lfn4ld.bkt.clouddn.com/icon-faxian-fenlei.png" >
          <img v-else  src="http://ot9lfn4ld.bkt.clouddn.com/find.png">
          <b :class="{active:navflag3}">分类</b>
          </router-link>
        </li>
        <li>
          <router-link to="/user">
         <img v-if="!navflag4" src="http://ot9lfn4ld.bkt.clouddn.com/icon-faxian-wode.png" >
        <img v-else src="http://ot9lfn4ld.bkt.clouddn.com/word.png">
          <b :class="{active:navflag4}">我的</b>
          </router-link>
        </li>
      </ul>
    </div>
</template>
<script>
  export default {
    name: 'bottomnav',
    data() {
      return {
        
      }
    },
    props:{
      navflag1:{
        type:Boolean,
        default:false
      },
      navflag2:{
        type:Boolean,
        default:false
      },
      navflag3:{
        type:Boolean,
        default:false
      },
      navflag4:{
        type:Boolean,
        default:false
      }
    }
  }

</script>

<style lang="less" scoped>
.bottom_nav{
    position: fixed;
    bottom: 0;
    font-size: 22/75rem;
    color: #808080;
    height: 98px;
    background-color: #fff;
    box-shadow: 5/75rem 0 50/75rem #fafafa;
    padding-bottom: 30/75rem;
}
li{
  float: left;
  margin:0 70.7/75rem;
}
img{
  height: 46/75rem;
  width: 46/75rem;
  display: block;
  margin:15/75rem 0 5/75rem 0;
}
b{
  display: block;
  line-height: 22/75rem;
}
.active{
  color:#ff406f;
}

</style>
